/**
 * 工具栏组件
 */
import React from 'react';

import { Button, Menu, Dropdown, Popconfirm, Radio } from 'antd';

import { doActionHandler, isEmpty, getLocalMessage } from '../common';

import { getUIActionGroup } from '../uiConfig';

import UIIcon from './UIIcon';

const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;

export default class UIToolbar extends React.Component {

    constructor(props) {
        super(props);

        let actionGroup = getUIActionGroup(props.actionGroupId);

        this.state = {
            actionGroup: actionGroup,
            ...props.state,
        };
    }

    getParent = () => {
        return this.props.parent;
    }

    handleAction = (action) => {
        
        const { history, actionHandler, parent } = this.props;
        const actionEvent = {
            actionId: action.actionId,
            action: action.handler,
            component: parent !== undefined ? parent : this,
        };

        if(action.params !== undefined){
            actionEvent.params = action.params;
        }

        if (actionHandler) {
            if (action.handler.startsWith('/') && history) {
                history.push(action.handler);
            }
            else {
                doActionHandler(actionEvent, actionHandler(actionEvent));
            }
        }
    }

    setEnable = (actionId,enabled) => {
        var value = {};
        value[actionId] = enabled;
        this.setState(value);
    }

    enable = (actionId) => {
        var value = {};
        value[actionId] = false;
        this.setState(value);
    }

    disable = (actionId) => {
        var value = {};
        value[actionId] = true;
        this.setState(value);
    }

    setActionGroup = (actionGroup) => {
        this.setState({ actionGroup: actionGroup });
    }

    buildToolbarItems = (actionGroup) => {

        if(actionGroup === null){
            return [];
        }

        const subMenuItems = {};

        actionGroup.actionBeans.forEach((action) => {
           
            if (action.subActionBeans !== undefined && action.subActionBeans.length > 0 && action.type !== 'radio') {
                subMenuItems[action.id] = (
                    <Menu onClick={(e) => { this.handleAction(e.item.props.action) }}>
                        {
                            action.subActionBeans.map((subAction) => {
                                
                                const actionDisabled = this.state !== null && subAction.id in this.state ? this.state[subAction.id] : false;
                                return (
                                    isEmpty(subAction.confirmInfoKey) === false  && !actionDisabled ?
                                        (<Popconfirm title={getLocalMessage(subAction.confirmInfoKey, subAction.confirmInfoKey)} onConfirm={this.handleAction.bind(this, { actionId: subAction.id, handler: subAction.handler })}>
                                            <Menu.Item key={subAction.id} action={{ actionId: subAction.id, handler: subAction.handler }} disabled={actionDisabled}>
                                                {isEmpty(subAction.icon) === false ? <UIIcon icon={subAction.icon} /> : ''}{getLocalMessage(subAction.labelKey, subAction.label)}
                                            </Menu.Item>
                                        </Popconfirm>) :
                                        <Menu.Item key={subAction.id} action={{ actionId: subAction.id, handler: subAction.handler }} disabled={actionDisabled}>
                                            {isEmpty(subAction.icon) === false ? <UIIcon icon={subAction.icon} /> : ''}{getLocalMessage(subAction.labelKey, subAction.label)}
                                        </Menu.Item>
                                )
                            })

                        }
                    </Menu>
                );
            }
        });

        const actions = actionGroup.actionBeans.map((action, index) => {
            let actionType = 'button';
            if (action.type !== 'push') {
                actionType = action.type;
            }

            const actionDisabled = this.state !== null && action.id in this.state ? this.state[action.id] : false;

            if (action.subActionBeans === undefined || action.subActionBeans.length === 0) {
                return (isEmpty(action.confirmInfoKey) === false && !actionDisabled ? (
                    <Popconfirm key={'Popconfirm' + action.id} title={getLocalMessage(action.confirmInfoKey, action.confirmInfoKey)} onConfirm={this.handleAction.bind(this, { actionId: action.id, handler: action.handler })}>
                        <Button size="default" type={action.style} disabled={actionDisabled} style={index > 0 ? { marginLeft: 2 } : null}>{isEmpty(action.icon) === false ? <UIIcon icon={action.icon} /> : ''}{getLocalMessage(action.label, action.label)}</Button>
                    </Popconfirm>
                ) :
                    <Button key={'Button' + action.id} size="default" type={action.style} disabled={actionDisabled} onClick={this.handleAction.bind(this, { actionId: action.id, handler: action.handler })} style={index > 0 ? { marginLeft: 2 } : null}>{isEmpty(action.icon) === false ? <UIIcon icon={action.icon} /> : ''}{getLocalMessage(action.label, action.label)}</Button>
                );
            }
            else if (actionType === "radio") {

                let radioButtons = action.subActionBeans.map((subAction,index) => {
                    return <RadioButton key={'RadioButton' + action.id+ index} value={subAction.id} disabled={actionDisabled}>{isEmpty(subAction.icon) === false ? <UIIcon icon={subAction.icon} /> : ''} {getLocalMessage(subAction.labelKey, subAction.label)}</RadioButton>
                })

                return (
                    <RadioGroup key={'RadioGroup' + action.id + index} onChange={(e) => { this.handleAction({ actionId: action.id, handler : action.handler ,params: e.target.value }) }} value={this.props.value}>
                        {radioButtons}
                    </RadioGroup>
                );
            }
            else {
                return (
                    <Dropdown key={'Dropdown' + action.id} overlay={subMenuItems[action.id]} disabled={actionDisabled}>
                        <Button size="default" style={{ marginLeft: 4 }} disabled={actionDisabled}>
                            {isEmpty(action.icon) === false ? <UIIcon icon={action.icon} /> : ''}
                            {getLocalMessage(action.labelKey, action.label)}
                        </Button>
                    </Dropdown>
                );
            }
        });

        return actions;
    }

    render() {

        const { actionGroup } = this.state;

        const toolbarItems = this.buildToolbarItems(actionGroup);
        
        return (
            <React.Fragment>
                {toolbarItems}
            </React.Fragment>
        );
    }
}
